<template>
	<view>
		<view class="goodlist-item">
			<view class="item-title">
				<image :src="asyncImgs.my.shopname" mode=""></image>
				<view>真经官方旗舰店</view>
			</view>
			<!-- <view class="item-gooddetails">
				<image class="item-gooddetails-left" src="" mode="aspectFill"></image>
				<view class="item-gooddetails-right">
					<view>披萨饼低6个自制披披萨饼低6个自制披萨皮培酱半成品6/8/9...</view>
					<view>
						<view>￥18</view>
						<view>×1</view>
					</view>
					<view><view>支持7天无理由退货</view></view>
				</view>
			</view> -->

			<!-- 多个商品内容 -->
			<view class="item-gooddetails-two">
				<view>
					<image src="" mode=""></image>
					<image src="" mode=""></image>
					<image src="" mode=""></image>
				</view>
				<view @click="goodshow=!goodshow">
					<view>共3件</view>
					<image :src="asyncImgs.my.icon_right_3" mode=""></image>
				</view>
			</view>
			<!-- 多个商品内容 -->

			<!-- 配送方式 -->
			<view class="deliverymode">
				<view class="deliverymode-left">配送</view>
				<view class="deliverymode-right">
					<view class="deliverymode-right-one" @click="show=!show">
						<view>到点自提</view>
						<image :src="asyncImgs.my.icon_right_3" mode=""></image>
					</view>
					<view class="deliverymode-right-two">
						<view>[某某某]</view>
						<view>123456798</view>
					</view>
				</view>
			</view>
			<!-- 配送方式 -->

			<!-- 到店自提内容 -->
			<view class="todoor">
				<view>
					<view>到店自提</view>
					<view>河南理工大学科 技园河南理工大学科 技园河南理工大学科 技园...</view>
					<view>700M</view>
					<view>修改</view>
				</view>
				<view>
					<image src="" mode=""></image>
				</view>
			</view>
			<!-- 到店自提内容 -->

			<view class="message">
				<view>留言</view>
				<input type="text" value="" placeholder="建议留言前先与商家沟通确认" />
			</view>
		</view>

		<!-- 选择配送方式弹窗内容 -->
		<u-popup mode="bottom" v-model="show" border-radius="22">
			<view class="pay-top">
				<view>配送</view>
				<image @click="show=!show" :src="asyncImgs.home.close" mode=""></image>
			</view>
			<view class="pay-way">
				<view class="pay-way-list" :class="payway==1?'select-way-list':''">快递配送</view>
				<view class="pay-way-list" :class="payway==2?'select-way-list':''">到店自提</view>
				<view class="pay-way-list" :class="payway==3?'select-way-list':''">外卖配送</view>
			</view>
			<view class="self-take">
				<view class="self-take-one">自提人信息</view>
				<view class="self-take-two">
					<view>自提联系人</view>
					<input type="text" value="" placeholder="请输入联系人名称" />
				</view>
				<view class="self-take-two">
					<view>联系人电话</view>
					<input type="number" value="" placeholder="请输入联系人电话" />
				</view>
			</view>
			<view class="confrim">
				<view>确定</view>
			</view>
		</u-popup>
		<!-- 选择配送方式弹窗内容 -->

		<!-- 商品清单 -->
		<u-popup mode="bottom" v-model="goodshow" border-radius="22">
			<view class="goodlist-top">
				<view>商品清单</view>
				<view>
					<view>共4件</view>
					<image @click="goodshow=!goodshow" :src="asyncImgs.home.close" mode=""></image>
				</view>
			</view>
			<scroll-view scroll-y="true" class="good-list-item">
				<view class="item-gooddetails" v-for="(item,index) in 4" :key="index">
					<image class="item-gooddetails-left" src="" mode="aspectFill"></image>
					<view class="item-gooddetails-right-two">
						<view>披萨饼低6个自制披披萨饼低6个自制披萨皮培酱半成品6/8/9...</view>
						<view>
							<view>￥18</view>
							<view>×1</view>
						</view>
						<view>
							
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="goodlist-bottom">若对价格有所疑问，可点击查看详情</view>
		</u-popup>
		<!-- 商品清单 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				goodshow: false,
				payway: 2
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	view {
		color: #262626;
		font-size: 26rpx;
	}

	.goodlist-item {
		margin-top: 22rpx;
		background-color: #FFFFFF;
		border-radius: 22rpx;
		padding: 48rpx 36rpx;
	}

	.item-title {
		display: flex;
		align-items: center;

		image {
			width: 26rpx;
			height: 26rpx;
		}

		view {
			margin-left: 10rpx;
			font-size: 26rpx;
		}
	}

	.item-gooddetails {
		margin-top: 42rpx;
		display: flex;
		align-items: center;

		.item-gooddetails-left {
			width: 180rpx;
			height: 180rpx;
			border-radius: 10rpx;
			background-color: red;
		}

		.item-gooddetails-right {
			flex: 1;
			margin-left: 24rpx;
			display: flex;
			flex-direction: column;
			overflow: hidden;

			>view:nth-child(1) {
				font-size: 24rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			>view:nth-child(2) {
				margin: 26rpx 0rpx;
				display: flex;
				justify-content: space-between;

				view:first-child {
					font-size: 34rpx;
					font-weight: bold;
					color: #F2270C;
				}

				view:last-child {
					font-size: 24rpx;
				}
			}

			>view:nth-child(3) {
				view {
					display: inline-block;
					font-size: 20rpx;
					color: #F22D14;
					border: 1rpx solid #FF978A;
					border-radius: 4rpx;
				}

			}
		}
	}

	.item-gooddetails-two {
		margin-top: 42rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		>view:first-child {
			image {
				margin-right: 20rpx;
				width: 120rpx;
				height: 120rpx;
				border-radius: 10rpx;
				background-color: red;
			}
		}

		>view:last-child {
			display: flex;
			align-items: center;

			view {
				font-size: 26rpx;
			}

			image {
				margin-left: 22rpx;
				width: 12rpx;
				height: 20rpx;
			}
		}
	}

	.deliverymode {
		margin-top: 44rpx;
		display: flex;
		justify-content: space-between;

		.deliverymode-right {
			.deliverymode-right-one {
				display: flex;
				align-items: center;
				justify-content: flex-end;

				image {
					width: 12rpx;
					height: 20rpx;
					margin-left: 20rpx;
				}
			}

			.deliverymode-right-two {
				margin-top: 10rpx;
				display: flex;
				padding-right: 32rpx;
				justify-content: flex-end;

				view:first-child {
					margin-right: 14rpx;
					color: #F33016;
				}
			}
		}
	}

	.todoor {
		margin-top: 34rpx;
		border-radius: 10rpx;
		background-color: #F6F6F6;
		padding: 24rpx 26rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		>view:first-child {
			display: flex;

			view:nth-child(2) {
				margin-left: 20rpx;
				width: 181rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}

			view:nth-child(3) {
				margin: 0rpx 20rpx;
			}

			view:nth-child(4) {
				font-size: 20rpx;
				text-align: center;
				line-height: 30rpx;
				width: 64rpx;
				height: 30rpx;
				border: 1rpx solid #8C8C8C;
				border-radius: 16rpx;
			}
		}

		>view:last-child {
			image {
				width: 90rpx;
				height: 44rpx;
				background-color: red;
			}
		}
	}

	.message {
		margin-top: 46rpx;
		display: flex;
		align-items: center;

		input {
			flex: 1;
			margin-left: 28rpx;
			font-size: 26rpx;
		}
	}

	.pay-top {
		height: 109rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0rpx 36rpx;

		view {
			font-size: 36rpx;
			font-weight: bold;
		}

		image {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.pay-way {
		padding: 0rpx 36rpx 34rpx;
		display: flex;
		flex-wrap: wrap;
		border-bottom: 1rpx solid #F2F2F2;

		.pay-way-list {
			margin-right: 24rpx;
			margin-bottom: 24rpx;
			padding: 18rpx 36rpx;
			border-radius: 30rpx;
			background-color: #F2F2F2;
			font-size: 22rpx;
			color: #BFBFBF;
		}

		.select-way-list {
			padding: 16rpx 34rpx;
			border: 1rpx solid #F2270C;
			background-color: #FCEDEB;
			color: #F2270C;
		}
	}

	.self-take {
		padding: 38rpx 36rpx 34rpx;
		border-bottom: 1rpx solid #F2F2F2;

		.self-take-one {
			font-weight: bold;
		}

		.self-take-two {
			margin-top: 36rpx;
			display: flex;
			align-items: center;

			view {
				font-size: 24rpx;
			}

			input {
				margin-left: 50rpx;
				flex: 1;
				font-size: 24rpx;
			}
		}
	}

	.confrim {
		margin-top: 360rpx;
		padding: 12rpx 36rpx;

		view {
			width: 100%;
			height: 76rpx;
			line-height: 76rpx;
			text-align: center;
			font-size: 30rpx;
			color: #FFFFFF;
			background: linear-gradient(90deg, #F3150C, #F14B0C);
			border-radius: 38rpx;
		}
	}

	.goodlist-top {
		height: 109rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0rpx 36rpx;

		>view:first-child {
			font-size: 36rpx;
			font-weight: bold;
		}

		>view:last-child {
			display: flex;
			align-items: center;

			view {
				font-size: 24rpx;
			}

			image {
				margin-left: 24rpx;
				width: 40rpx;
				height: 40rpx;
			}
		}
	}

	.good-list-item {
		padding: 0rpx 36rpx 24rpx;
		height: 720rpx;
		border-bottom: 1rpx solid #F2F2F2;

		.item-gooddetails-right-two {
			flex: 1;
			margin-left: 24rpx;
			display: flex;
			flex-direction: column;
			overflow: hidden;

			>view:nth-child(1) {
				font-size: 24rpx;
				width: 460rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			>view:nth-child(2) {
				width: 460rpx;
				margin: 26rpx 0rpx;
				display: flex;
				justify-content: space-between;

				view:first-child {
					font-size: 34rpx;
					font-weight: bold;
					color: #F2270C;
				}

				view:last-child {
					font-size: 24rpx;
				}
			}

			>view:nth-child(3) {
				view {
					display: inline-block;
					font-size: 20rpx;
					color: #F22D14;
					border: 1rpx solid #FF978A;
					border-radius: 4rpx;
				}

			}
		}
	}

	.goodlist-bottom {
		margin: 47rpx 0rpx;
		text-align: center;
		font-size: 22rpx;
		color: #949494;
	}
</style>
